Webサイトの動き続ける画像や動画、カルーセルのデザインをよりよくする
動きのあるWebサイトとは
ここで取り上げる「動きのあるWebサイト」には、たとえば次のようなものがあります。
- Webサイトのトップページなどで、ずっと動き続ける画像がある
- Webサイトの背景が動画になっていて、それを停止する手段がない。スクロールしないとコンテンツが表示されない
- Webサイトのトップページなどで、主要なコンテンツへのリンクが画像になっていて、見ていると画像が次々と入れ替わる(いわゆるカルーセル)
- 電光掲示板のように、文字がずっと流れ続ける
以下、それぞれの具体例をご説明します。具体例のサンプルページは動くWebデザインアイデア帳へリンクさせていただいています。
1. Webサイトのトップページなどで、ずっと動き続ける画像がある
Webサイトのトップページでよく見ます。
Webサイトを開いただけで、複数の画像を自動的に切り替えながら表示させるパターンです。
モーショングラフィックス(Motion Graphics)と呼ぶこともあるようです。
サンプルサイトのように、Webサイトのトップページなどで見かけることがあります。
2. Webサイトの背景が動画になっていて、それを停止する手段がない。スクロールしないとコンテンツが表示されない
Webサイト全体、あるいは一部が動画になっていて、特に再生などの操作をしなくても自動で再生されるコンテンツです。「背景動画(Video Background)」と呼ぶこともあるようです。
サンプルサイトでは、自然の風景がウィンドウいっぱいに表示されています。
3. Webサイトのトップページなどで、主要なコンテンツへのリンクが画像になっていて、見ていると画像が次々と入れ替わる(いわゆるカルーセル)
Webサイトのトップページなどで見られる、特に何も操作しなくても画像を次々に切り替えるコンテンツです。最後の画像が表示されても、また最初の画像に戻ることから、カルーセル(Carousel Design Pattern)と呼ばれます。
カルーセルの定義について、『デザイニング・インターフェース 第2版』には、次のように書かれています。
視覚的に興味を引くことができる項目のリストを、横一列またはアーチ状に配置し、画像のサムネイルを左右にスクロールまたはスワイプして見ることができるようにする。場合によっては中央の項目を拡大表示する。
サンプルサイトは、お花屋さんのECサイトで、ブーケ画像が次々に表示される例になっています。
4. 電光掲示板のように、文字がずっと流れ続ける
「テキストティッカー(Text Ticker)」と呼ばれることもあるようです。太古のHTMLにあった marquee要素ですというとピンとくる方もおられるでしょうか。
学校のWebサイトで見かける気がします。サンプルサイトでは、ニュース記事が自動的に縦にスクロールする例になっています。
ユーザーの困りごとは何か
ここまでご説明した「動きのあるWebサイト」は、特に珍しいデザインではなく、よく見かけるデザインという印象です。では、このようなデザインのWebサイトで、ユーザーはどのようなことに困っているのでしょうか。
アクセシビリティ基準のデファクト・スタンダードであるWCAG(Web Content Accessibility Guidelines) 2.1の関連文書であるUnderstanding WCAG 2.1を参照してみましょう。なお、ここではウェブアクセシビリティ基盤委員会 (WAIC) の翻訳ワーキンググループが公開している日本語版を引用します。
まず、該当箇所は達成基準 2.2.2: 一時停止、停止、非表示を理解するで、ここでは「動きのあるWebサイト」を「動きのある又は自動更新するコンテンツ」と呼んでいます。
ここでは、ユーザーの困りごとについて、次のように記載されています。
動きのある又は自動更新するコンテンツは、動きのあるオブジェクトを追うのが困難な利用者だけでなく、動かないテキストをすばやく読み取ることが困難な利用者にも障壁になりうる。スクリーンリーダーにも問題が発生する可能性がある。
特定のグループ、具体的には注意欠陥障害をもつグループは、点滅しているコンテンツに気を取られ、ウェブページの他の部分に集中することが困難となる。
具体的な例
先ほどの引用にある
動きのあるオブジェクトを追うのが困難な利用者だけでなく、動かないテキストをすばやく読み取ることが困難な利用者
こちらの利用者について考えてみます。
話を深掘りすると長くなってしまいますが、発達支援のコンテンツに詳しく書いてありますが、視覚機能には多くの働きがあり、これらがうまく協調できない方はおられます。その場合、カルーセルのような動いているオブジェクトの文字を素早く読んだり、次の画像に切り替わる前にクリックすることが難しいケースが考えられます。
また、厚生労働省の学習障害のコンテンツにあるように、そもそも文字が素早く読めない方もいらっしゃいます。
つぎに
注意欠陥障害をもつグループ
について、厚生労働省のADHD（注意欠如・多動症）のページにあるように、「活動に集中できない」という行動をとる方がおられます。その場合、例えば何か目的を持ってWebサイトを表示させた時に背景動画が表示されてしまうと、その動画に気を取られて、そもそもの目的を達成できない可能性もあります。このページには、
ADHDの有病率は報告によって差がありますが、学齢期の小児の3～7％程度と考えられています。
と書かれています。
どのようにすれば、よりよくなるのか
前述のWCAG 2.1の達成基準 2.2.2 一時停止、停止、非表示には、以下のように書かれています。
達成基準 2.2.2 一時停止、停止、非表示 (レベル A): 動きのある、点滅している、スクロールする、又は自動更新する情報は、次のすべての事項を満たしている
- 動き、点滅、スクロール
- 動きのある、点滅している、又はスクロールしている情報が、(1) 自動的に開始し、(2) 5 秒よりも長く継続し、かつ、(3) その他のコンテンツと並行して提示される場合、利用者がそれらを一時停止、停止、又は非表示にすることのできるメカニズムがある。ただし、その動き、点滅、又はスクロールが必要不可欠な動作の一部である場合は除く。
- 自動更新
自動更新する情報が、(1) 自動的に開始し、 (2) その他のコンテンツと並行して提示される場合、利用者がそれを一時停止、停止、もしくは非表示にする、又はその更新頻度を調整することのできるメカニズムがある。ただし、その自動更新が必要不可欠な動作の一部である場合は除く。
まず、対象のコンテンツについて、条件が書かれています。
動きのある、点滅している、またはスクロールしている情報が
- 自動的に開始する
- 5秒よりも長く継続する
- その他のコンテンツと並行して提示される
ことが条件となっています。また、「自動更新する情報」については
- 自動的に開始する
- その他のコンテンツと並行して提示される
となっています。今回ご紹介している「動きのあるWebサイト」のうち「テキストティッカー」は「自動更新する情報」それ以外は「動きのある、点滅している、またはスクロールしている情報」になります。
次に、対応方法が書かれています。
利用者がそれらを一時停止、停止、又は非表示にすることのできるメカニズムがある
「自動更新する情報」については、これ以外に「その更新頻度を調整することのできるメカニズムがある」こととなっています。
実際の対応例
文部科科学省のトップページを見てみましょう。「文部科科学省からのお知らせ」の部分がカルーセルになっています。
UIの上部にコンテンツへのリンクになっている大きな画像があり、画像をクリックすると該当のコンテンツに遷移します。その下に切り替わる画像のサムネイルが並んでいます。
8枚の画像の切り替えが自動的に開始され、5秒以上継続しますので、条件を満たしています。
注目いただきたいのは、UI上部の大きな画像に、再生ボタンと一時停止ボタンが配置されています。ページを表示後、画像の切り替えは自動的に開始されますが、一時停止ボタンをクリックすると切り替えは停止します。再生ボタンを押すと再開されます。
また、UI下部のサムネイル画像をクリックすることで、任意の画像をUI上部に拡大表示することができます。サムネイルの左右にある横向き三角のUIをクリックすることで、好きなタイミングで画像を切り替えることもできます。
このような工夫を施すことで、一般的なカルーセルUIと同様の動きを実現しつつ、多様なニーズにも対応することができ、まさにアクセシブルなカルーセルUIが実現しています。
まとめ
今回は、ページを表示しただけで動き出す「動きのあるWebサイト」を集めて、それによって困っているユーザーがおられることを調べました。また、より良いデザインとするための方法を、WCAGを参照して調査し、その実装例についてご説明しました。
